import {useModel} from '@umijs/max'
import React,{PropsWithChildren} from 'react'
import {ModalForm, ProFormText, ProFormSelect, ProFormTextArea} from '@ant-design/pro-components'


const CreateForm: React.FC<PropsWithChildren<UpdateFormProps>> = ({
  children,
}) => {
  const { staffCategoryEnum, handleAdd } = useModel('Staff.model');

  return (
    <ModalForm<API.Staff_Add_Body>
      trigger={children}
      title="STAFF - ADD"
      autoFocusFirstInput
      submitTimeout={2000}
      modalProps={{ destroyOnClose: true }}
      onFinish={handleAdd}
      // onFinish={async (values) => {
      //   const success = await handleAdd(values)
      //   return success // 返回true MODEL FROM 自动关闭销毁
      // }}
    >
      <ProFormText
        name="stf_name"
        label="name"
        placeholder="Please input staff name"
        rules={[
          { required: true, message: 'Staff name is required!' },
          { min: 2, max: 20, message: 'Staff name length 2 - 20!' },
        ]}
      />
      <ProFormSelect
        name="stf_category"
        label="category"
        placeholder="Please select staff category"
        valueEnum={staffCategoryEnum}
        rules={[{ required: true, message: 'Please select staff category' }]}
      />
      <ProFormTextArea
        name="stf_remark"
        label="remark"
        placeholder="Please input staff remark.."
      />
    </ModalForm>
  );
};

export default CreateForm;
